<template>
  <div>
    <v_header></v_header>
    <div class="search_box">
      <div class="img_box">
        <img src="./../../static/logo.jpg" alt="logo" width="20%" />
      </div>
      <el-input
        v-model="bookName"
        placeholder="搜索"
        class="input_box"
      ></el-input>
      <br />
      <el-button type="primary" @click="onSubmit" class="button_box"
        >查询</el-button
      >
    </div>
  </div>
</template>

<script>
import v_header from "@/components/header.vue";

export default {
  data() {
    return {
      bookName: ""
    };
  },
  components: {
    v_header: v_header
  },
  methods: {
    onSubmit() {
      var userInsert = this.bookName;

      this.$axios({
        method: "get",
        url: "api",
        data: this.qs.stringify({
          //这里是发送给后台的数据
          keywords: userInsert
        })
      })
        .then(response => {
          this.$router.push({
            name: "searchResult",
            params: { bid: row.bookID, indexActive: "4" }
          });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style>
.search_box {
  margin-top: 5%;
}
.img_box {
  padding-bottom: 1%;
}
.input_box {
  width: 30%;
}
.button_box {
  margin-top: 1%;
}
</style>
